    <style include="settings-shared passwords-shared">
      cr-input {
        --cr-input-error-display: none;
      }

      cr-input:not(:last-of-type) {
        margin-bottom: var(--cr-form-field-bottom-spacing);
      }

      cr-icon-button {
        --cr-icon-button-icon-size: 16px;
        margin-inline-start: 2px;
      }

      #footnote {
        margin-inline-start: 2px;
        margin-top: 16px;
      }

    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div slot="title">$i18n{editPasswordTitle}</div>
      <div slot="body">
        <cr-input value="[[item.detailedOrigin]]" readonly
            label="[[getSiteOrApp_(item.isAndroidCredential)]]">
        </cr-input>
        <cr-input value="[[item.username]]" readonly
            label="$i18n{editPasswordUsernameLabel}">
        </cr-input>
        <cr-input id="passwordInput" value="[[item.password]]"
            class="password-input" label="$i18n{editPasswordPasswordLabel}"
            type="[[getPasswordInputType_(visible)]]" required auto-validate
            invalid="{{inputInvalid_}}">
          <cr-icon-button id="showPasswordButton"
              class$="[[showPasswordIcon_(visible)]]"
              slot="suffix" on-click="onShowPasswordButtonClick_"
              title="[[showPasswordTitle_(visible)]]">
          </cr-icon-button>
        </cr-input>
        <div id="footnote">[[getFootnote_(item.formattedOrigin)]]</div>
      </div>
      <div slot="button-container">
        <cr-button id="cancel" class="cancel-button" on-click="onCancel_">
          $i18n{cancel}
        </cr-button>
        <cr-button id="save" class="action-button" on-click="onSave_"
             disabled="[[inputInvalid_]]">
          $i18n{save}
        </cr-button>
      </div>
    </cr-dialog>
